<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
    img{
        width:230px;
        padding:5px;
         vertical-align:bottom; 
     }
     .content{
         width:240px;
         box-shadow: 0 0 1px 1px rgba(51,51, 51, 0.1);
         float: left;
         position: relative;
     }
     #container{
          overflow: hidden; 
         /* position: relative; */
         margin-left: auto;
         margin-right: auto;
     }
    </style>
</head>
<body>
    <div id="container">
        <div class="content">
            <img src="images/01.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/02.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/03.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/04.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/05.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/06.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/07.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/08.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/09.jpg" alt="">
        </div>
    </div>
    <script>
        window.onload=function(){
    var contents=document.getElementsByClassName("content");
    var ww=window.innerWidth;
    var cw=contents[0].offsetWidth;
    var num=Math.floor(ww/cw);
    var container=document.getElementById("container");
    container.style.width=num*cw+"px";
    // console.log(num);
    var content_arr=Array.prototype.slice.call(contents);
    var arr_height=[];
    content_arr.forEach((element,index)=>{
        if(index<num){
            arr_height.push(element.offsetHeight)
        }else{
            console.log(index); 
            var minHeight=Math.min(...arr_height);
            var minIndex=arr_height.indexOf(minHeight);
            var offsetLeft=content_arr[minIndex].offsetLeft;
            content_arr[index].style.position="absolute";
            content_arr[index].style.top=minHeight+"px";
            content_arr[index].style.left=offsetLeft+"px";
            arr_height[minIndex]+=content_arr[index].offsetHeight;
        }
    })
    
 }
   
    </script>
</body>
</html>